function process()
{
  // create the <p> element
    oP = document.createElement("p");
    // create the "Hello..." text node
    oHelloText = document.createTextNode
    ("Hey dude! Here's a cool list of colors for you:");
    // add the text node as a child element of <p>
    oP.appendChild(oHelloText);

    // create the <ul> element
    oUl = document.createElement("ul")

    // create the first <ui> element and add a text node to it
    oLiBlack = document.createElement("li");
    oBlack = document.createTextNode("Black");
    oLiBlack.appendChild(oBlack);

    // create the second <ui> element and add a text node to it
    oLiOrange = document.createElement("li");
    oOrange = document.createTextNode("Orange");
    oLiOrange.appendChild(oOrange);

    // create the third <ui> element and add a text node to it
    oLiPink = document.createElement("li");
    oPink = document.createTextNode("Pink");
    oLiPink.appendChild(oPink);

    // add the <ui> elements as children to the <ul> element
    oUl.appendChild(oLiBlack);
    oUl.appendChild(oLiOrange);
    oUl.appendChild(oLiPink);

    // create the <hr/> element
    hr = document.createElement("hr");
    
    // create the <p> element
    theStudents = document.createElement("p");
    // create the "Hello..." text node
    students = document.createTextNode
    ("Hey dude! Studentlist right here!");
    
    // add the text node as a child element of <p>
    theStudents.appendChild(students);

    // create the <ul> element
    list = document.createElement("ul")

    // create the first student and append to the UL list
    // basic Li element
    student1 = document.createElement("li");
    student1Text = document.createTextNode("Student1");
    student1.appendChild(student1Text);
    
    // 2nd ul element
    ulStudent1 = document.createElement("ul");
    
    // first student and li elements
    liNaam1 = document.createElement("li");
    liNummer1 = document.createElement("li");
    naam1 = document.createTextNode("Johan Kemna");
    nummer1 = document.createTextNode("s248391");
    
    liNaam1.appendChild(naam1);
    liNummer1.appendChild(nummer1);
    
    ulStudent1.appendChild(liNaam1);
    ulStudent1.appendChild(liNummer1);
    
    // append the li elements to the higher li element.
    student1.appendChild(ulStudent1);
    
    
    // create the second student and append to the UL list
    // basic Li element
    student2 = document.createElement("li");
    student2Text = document.createTextNode("Student2");
    student2.appendChild(student2Text);
    
    // 2nd ul element
    ulStudent2 = document.createElement("ul");
    
    // second student and li elements
    liNaam2 = document.createElement("li");
    liNummer2 = document.createElement("li");
    naam2 = document.createTextNode("Jos Vinke");
    nummer2 = document.createTextNode("s1011496");
    
    liNaam2.appendChild(naam2);
    liNummer2.appendChild(nummer2);
    
    ulStudent2.appendChild(liNaam2);
    ulStudent2.appendChild(liNummer2);
    
    // append the li elements to the higher li element.
    student2.appendChild(ulStudent2);
    
    list.appendChild(student1);
    list.appendChild(student2);
    

    // obtain a reference to the <div> element on the page
    myDiv = document.getElementById("myDivElement");

    // add content to the <div> element
    myDiv.appendChild(oHelloText);
    myDiv.appendChild(oUl);
    myDiv.appendChild(hr);
    myDiv.appendChild(theStudents);
    myDiv.appendChild(list);
}
